﻿@model TicketMaster.Web.Models.Reservation.ReservationStepTwo
@{
    ViewBag.Title = "Reservation";
}

<script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize(data) {

        directionsDisplay = new google.maps.DirectionsRenderer()
        var options = {
            center: new google.maps.LatLng(data.FromCity.Latitude, data.FromCity.Longitude),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

        map = new google.maps.Map($("#map")[0], options);
        directionsDisplay.setMap(map);

        var waypoints = [];

        for (var i = 0; i < data.WaypointCities.length; i++) {

            var currentCity = data.WaypointCities[i];
            var waypoint = {
                location: new google.maps.LatLng(currentCity.Latitude, currentCity.Longitude),
                stopover : true
            };
            waypoints.push(waypoint)
        }

        var request = {
            origin: new google.maps.LatLng(data.FromCity.Latitude, data.FromCity.Longitude),
            destination: new google.maps.LatLng(data.ToCity.Latitude, data.ToCity.Longitude),
            travelMode: google.maps.TravelMode.DRIVING,
            waypoints: waypoints
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }
    $(function () {
        var ser = @Html.Raw(Json.Encode(Model));
        initialize(ser);
    });
</script>
<div id="map" style="width:auto; height:500px; margin-top: 10px"></div>
<div>
    @foreach (var item in Model.Buses)
    {

        <div style="border: 1px solid black; margin: 5px; width:auto;" onclick="location.href='@Url.Action("ShowSeats", "Reservation", new { busID = @item.Id, routeID = @item.RouteId, merchantID = @item.MerchantId })'">
            <div>
                @Html.HiddenFor(x => item.Id)
                @item.StartCityName - @item.EndCityName
            </div>
            <div>
                @item.Duration мин.
            </div>
            <div>
                @item.MerchantName
            </div>
            <div>
                @item.DepartureTime
            </div>
        </div>
    }
</div>
@*<div id="directions_panel" style="margin:20px; background-color:#FFEE77;"></div>*@
